“Dynamic Mag” Documentation by “SBTemplates” v1.0



Created: 11 Jan 2014
By: Aumkar Thakur
Email: aumkarakhilesh@gmail.com

Thank you for downloading my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Table of Content

Getting Started - top

Hello, Lets start with installation process for these you need a account on blogger.com where you can create a free blog, In this guide I'm not going to tell you that how you can create a blog on blogger, I assume that you have a blogger account with a blogger blog, so let's get started!

Installing Blogger Template

Follow Below Steps To Install Blogger Template -

  • Login to blogger dashboard.
  • On Blogger Dashboard Click Template
  • Now Click On Backup/Restore button (Top Right).
  • Click Choose File button. Find where the “Dynamic Mag theme.xml” file location.
  • Now Click On Upload Button.




    • Customizing Menu - top

    To customize the drop down menu located above header follow below steps-



  • Login to blogger dashboard.
  • On Blogger Dashboard Click Template
  • Now Click On Edit HTML button
  • Now using ctrl+f find below code
    • 
<ul id='menu-main1'>
    
<li class='selected'><a href='/'>Home</a></li>
    
<li><a href='your-link-here'>About</a></li>
    
<li><a href='your-link-here'>Contact</a></li>
    
</ul>

  • Now replace your-link-here


    • To customize the drop down menu located below header follow below steps-



  • Login to blogger dashboard.
  • On Blogger Dashboard Click Template
  • Now Click On Edit HTML button
  • Now using ctrl+f find below code
    • 

<ul class='menu' id='menu-main'>
    
<li class='green'><a class='home' href='/'>Home</a></li>
    
<li class='red'><a href='your-link-here'>Business</a>
    
<ul class='sub-menu'>
    
<li><a href='your-link-here'>Post With Featured Image</a></li>
    
<li><a href='your-link-here'>Post With Slider</a></li>
    
<li><a href='your-link-here'>Post with SoundCloud</a></li>
    
<li><a href='your-link-here'>Post With Video</a></li>
    
</ul>
    
</li>
    
<li class='yellow'><a href='your-link-here'>Technology</a>
    
<ul class='sub-menu'>
    
<li><a href='your-link-here'>Authors</a></li>
    
<li><a href='your-link-here'>Sitemap</a></li>
    
<li><a href='your-link-here'>Tags</a></li>
    
<li><a href='your-link-here'>Timeline</a></li>
    
</ul>
    
</li>
    
<li class='green-2'><a href='your-link-here'>Life &amp; Style</a>
    
</li>
    
<li class='orange'><a href='your-link-here'>Games</a>
    
<ul class='sub-menu'>
    
<li><a href='your-link-here'>Full Width</a></li>
    
<li><a href='your-link-here'>Right Sidebar</a></li>
    
<li><a href='your-link-here'>Left SIdebar</a></li>
    
</ul>
    
</li>
    
<li class='pink'><a href='your-link-here'>Sports</a>
    
<ul class='sub-menu'>
    
<li><a href='your-link-here'>Stars</a></li>
    
<li><a href='your-link-here'>Points</a></li>
    
<li><a href='your-link-here'>Percent</a></li>
    
<li><a href='your-link-here'>in The Top</a></li>
    
</ul>
    
</li>
    
<li class='green-3'><a href='your-link-here'>Error Page</a></li>
    
<li class='ranpost'><a onclick='feelingLucky();'/></li>
    
</ul>

  • Now replace your-link-herewith the link you want and the respectively blue color highlited text.


    • Customize Social Buttons - top



    Social Media Follow Us buttons will help your blog/website to make your blog viral on Social Medias, To change the link of social medias button follow below steps:

  • Go to blogger dashboard
  • Click On Template Tab
  • Now Click On Edit HTML button
  • Now using ctrl+f find below code

    • <!--Social Icons Started -->
    
<div id='social'>
    
<a class='facebook' href='http://www.facebook.com/'/>
    
<a class='twitter' href='https://twitter.com/'/>
    
<a class='flickr' href='http://www.flickr.com/'/>
    
<a class='pinterest' href='http://pinterest.com/'/>
    
<a class='googleplus' href='https://plus.google.com/'/>
    
<a class='vimeo' href='http://vimeo.com/'/>
    
<a class='youtube' href='http://www.youtube.com/'/>
    
<a class='mail' href='mailto:info@SBTemplates.com'/>
    
</div>
    
<!--Social Icons End-->

  • Now replace all red color highlited url with your scoial medias username.




    • Change Background Image - top




  • Go to blogger dashboard
  • Click On Template Tab
  • Now Click On Edit HTML button
  • Now using ctrl+f find below code

    • body {
background: url(http://demo.smooththemes.com/magazon/wp-content/uploads/2013/09/bg-alt.jpg)fixed;
background-color: #fff;
color: #333333;
font-family: Tahoma,Arial,Verdana,sans-serif;
font-size: 13px;
}

  • Now replace all red color highlited url with your image url which you want as background.




    • How to show post with labels - top


    At last I'm going to tell you the most important thing which you have to add in your blog, Follow all the below steps carefully:


  • Go to blogger dashboard
  • Click on Layout tab
  • Now add a new gadget >> Html/JavaScript.
  • Paste below code there




    • Style 1



    
<div id='featurebottom1'>
    
<h2 class='headingfeature1'><a class="linku1" href="/search/label/Business">
    
Business</a>
    
</h2>
    
<div class='left-corner-canvas'/>
    
<script src='/feeds/posts/summary/-/Business?
    
max-results=4&amp;orderby=published&amp;alt=json-in-script&amp;
    
callback=recentthumbs&amp;' type='text/javascript'/>
    
</div>
    
<div style='clear:both;'/>
    
</script>
    
</div>
    
</div>

  • Now Replace Business with any label from which you want to display posts.
  • Click On Save button




    • Style 2



    

    
<div id='featurebottom2'>
    

    
<h2 class='headingfeature2'><a class="linku2" href="/search/label/Technology">
    

    
Technology</a>
    

    
</h2>
    

    
<div class='left-corner-canvas'/>
    

    
<script src='/feeds/posts/summary/-/Technology?
    

    
max-results=3&amp;orderby=published&amp;alt=json-in-script&amp;
    

    
callback=recentthumbs2&amp;' type='text/javascript'/>
    

    
</div>
    

    
<div style='clear:both;'/>
    

    
</script>
    

    
</div>
    

    
</div>
    

    

    

    
<div id='featurebottom13'>
    

    
<h2 class='headingfeature3'><a class="linku3" href="/search/label/LifeStyle">
    

    
Life & Style</a>
    

    
</h2>
    

    
<div class='left-corner-canvas'/>
    

    
<script src='/feeds/posts/summary/-/LifeStyle?
    

    
max-results=3&amp;orderby=published&amp;alt=json-in-script&amp;
    

    
callback=recentthumbs3&amp;' type='text/javascript'/>
    

    
</div>
    

    
<div style='clear:both;'/>
    

    
</script>
    

    
</div>
    

    
</div>

  • In this style yo have to add two labels because it shows 2 labels so replace Technology & Lifestyle with any label from which you want to display posts.
  • Click On Save button


    • Style 3



    
<div id='featurebottom1'>
    
<h2 class='headingfeature1'><a class="linku1" href="/search/label/Sports">
    
Sports</a>
    
</h2>
    
<div class='left-corner-canvas'/>
    
<script src='/feeds/posts/summary/-/Sports?
    
max-results=4&amp;orderby=published&amp;alt=json-in-script&amp;
    
callback=recentthumbs&amp;' type='text/javascript'/>
    
</div>
    
<div style='clear:both;'/>
    
</script>
    
</div>
    
</div>

  • Now Replace Sports with any label from which you want to display posts.
  • Click On Save button


    • Add Slider - top




  • Go to blogger dashboard
  • Click On Layout Tab
  • Now Just Above "BLOG POST" Add Gadget and paste below code there:

    • <div id="featpost"></div>
    
<script type='text/javascript'>
    
jQuery("#featpost").AutofeaturedPost({
    
MaxPost:5
    
});
    
</script>

  • Now Save it and preview your blog :)



    • The End